<template>
  <section class="personal">
    <headerUtil :obj="headerObj">我的中心</headerUtil>
    <div class="content" @scroll.passive="scrollData" ref="scrollOut">
      <userUtil :userInfo="user" :accountNum="currentBalance"></userUtil>
      <div v-if="user.showStartLivingBtn" @click="toLivingRoomList(1)">普通直播间列表</div>
 <div v-if="user.showStartLivingBtn" @click="toLivingRoomList(2)">PK直播间列表</div>
      <div v-if="user.showStartLivingBtn" @click="startingLivingFn(1)">1普通直播间</div>
      <div v-if="user.showStartLivingBtn" @click="startingLivingFn(2)">2PK直播间</div>
      <div class="productWrap">
        <div class="productItem" @click="playFn(item)" v-for="(item, index) in productList" :key="index">
          {{item.name}}
        </div>
      </div>
      <!-- <orderNavUtil></orderNavUtil> -->
      <!-- <powerNavUtil></powerNavUtil> -->
      <!-- <cartLineUtil>为您推荐</cartLineUtil> -->
      <!-- <div class="list">
        <productItemUtil :obj="item" v-for="(item, index) in list" :key="index"></productItemUtil>
      </div> -->
    </div>
    <!-- <commonNavUtil :iNow="5"></commonNavUtil> -->
  </section>
</template>
<script>
import headerUtil from "../base/common/headerUtil.vue";
import userUtil from "../base/personal/userUtil.vue";
import reqApis from "../../req/reqApis.js";
export default {
  components: {
    headerUtil,
    userUtil
  },
  data () {
    return {
      currentBalance: 0,
      user: {

      },
      headerObj:{
        showType: 2
      },
      list: [],
      productList: [],
      pageIndex: 1,
      isStop: false
    }
  },
  created() {
    this.getUserFn();
    this.getProductsFn();
  },
  methods: {
    scrollData() {
      let outH = this.$refs.scrollOut.scrollHeight,
          currentH = this.$refs.scrollOut.offsetHeight,
          offH = this.$refs.scrollOut.scrollTop;
        if(currentH + offH >= (outH-1)){
          this.pageIndex += 1;
        }
    },
    playFn(productObj) {
      let params = {
        productId: productObj.id,
        payChannel: 1, 
        paySource: 1
      }
      reqApis.payProductApi(params).then(res => {
        this.$message.success('充值成功');
          this.getProductsFn();
      }).catch(err => {

      });
    },
    getProductsFn() {
      reqApis.getProductsApi({type: 0}).then(res => {
        this.currentBalance = res.data.currentBalance;
        this.productList = res.data.payProductItemVOList;
      }).catch(err => {

      })
    },
    toLivingRoomList(type){
       this.$router.push({path: "/livingRoomList", query: {roomType: type}})
    },
    startingLivingFn(type){
      reqApis.startingLivingApi({type:type}).then(res => {
        if(type == 1) {
          this.$router.push({path: "/livingRoom", query: {roomId: res.data.roomId}})
        }else if(type ==2) {
          this.$router.push({path: "/pkLivingRoom", query: {roomId: res.data.roomId}})
        }
        
          console.log(res)
        }).catch(err => {
            console.log(err)
        })
    },
    getUserFn(){
      reqApis.initPageApi({}).then(res => {
              this.user = res.data;
            }).catch(err => {
                console.log(err)
            })
      // reqApis.getUserFn({}).then(res => {
      //   this.user = res.data;
      // })
    },
  }
}
</script>
<style lang="less" scoped>
.personal {
  width: 3.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: auto;
    .productWrap {
      
      margin-top: 0.1rem;
      padding: 0.1rem;
      .productItem {
        // width: 0.8rem;
        padding: 0 0.15rem;
        height: 0.3rem;
        line-height:0.3rem;
        text-align: center;
        font-size: 0.14rem;
        border-radius: .3rem;
        background: white;
        border: 1px solid #f2f2f2;
        display: inline-block;
        margin: 0 0.1rem 0.1rem 0;
      }
    }
    .list {
      background: white;
      overflow: hidden;
    }
  }
}
</style>

